/**
 * @description 图片拖拽事件绑定
 */

import E from 'wangeditor'
const { $} = E

/**
 * 设置拖拽框的rect
 * @param $drag drag Dom
 * @param width 要设置的宽度
 * @param height 要设置的高度
 * @param left 要设置的左边
 * @param top 要设置的顶部距离
 */
function setDragStyle($drag, width, height, left, top) {
  $drag.attr('style', `width:${width}px; height:${height}px; left:${left}px; top:${top}px;`)
}

/**
 * 生成一个图片指定大小的拖拽框
 * @param editor 编辑器实例
 * @param $textContainerElem 编辑框对象
 */
function createDragBox(editor, $textContainerElem){
  const $drag = $(
    `<div class="w-e-img-drag-mask">
            <div class="w-e-img-drag-show-size"></div>
            <div class="w-e-img-drag-rb"></div>
         </div>`
  )

  $drag.hide()
  $textContainerElem.append($drag)
  return $drag
}

/**
 * 显示拖拽框并设置宽度
 * @param $textContainerElem 编辑框实例
 * @param $drag 拖拽框对象
 */
function showDargBox($textContainerElem, $drag, $img) {
  const boxRect = $textContainerElem.getBoundingClientRect()
  const rect = $img.getBoundingClientRect()
  const rectW = rect.width.toFixed(2)
  const rectH = rect.height.toFixed(2)
  $drag.find('.w-e-img-drag-show-size').text(`${rectW}px * ${rectH}px`)
  setDragStyle(
    $drag,
    parseFloat(rectW),
    parseFloat(rectH),
    rect.left - boxRect.left,
    rect.top - boxRect.top
  )
  $drag.show()
}

/**
 * 生成图片拖拽框的 显示/隐藏 函数
 */
export function createShowHideFn(editor) {
  const $textContainerElem = editor.$textContainerElem
  let $imgTarget;

  // 生成拖拽框
  const $drag = createDragBox(editor, $textContainerElem)

  /**
   * 设置拖拽事件
   * @param $drag 拖拽框的domElement
   * @param $textContainerElem 编辑器实例
   */
  function bindDragEvents($drag, $container) {
    $drag.on('click', function (e) {
      e.stopPropagation()
    })
    $drag.on('mousedown', '.w-e-img-drag-rb', (e) => {
      // e.stopPropagation()
      e.preventDefault()

      if (!$imgTarget) return

      const firstX = e.clientX
      const firstY = e.clientY
      const boxRect = $container.getBoundingClientRect()
      const imgRect = $imgTarget.getBoundingClientRect()
      const width = imgRect.width
      const height = imgRect.height
      const left = imgRect.left - boxRect.left
      const top = imgRect.top - boxRect.top
      const ratio = width / height

      let setW = width
      let setH = height
      const $document = $(document)

      function offEvents() {
        $document.off('mousemove', mouseMoveHandler)
        $document.off('mouseup', mouseUpHandler)
      }

      function mouseMoveHandler(ev) {
        ev.stopPropagation()
        ev.preventDefault()

        setW = width + (ev.clientX - firstX)
        setH = height + (ev.clientY - firstY)

        // 等比计算
        if (setW / setH != ratio) {
          setH = setW / ratio
        }

        setW = parseFloat(setW.toFixed(2))
        setH = parseFloat(setH.toFixed(2))

        $drag
          .find('.w-e-img-drag-show-size')
          .text(
            `${setW.toFixed(2).replace('.00', '')}px * ${setH
              .toFixed(2)
              .replace('.00', '')}px`
          )
        setDragStyle($drag, setW, setH, left, top)
      }
      $document.on('mousemove', mouseMoveHandler)

      function mouseUpHandler() {
        $imgTarget.attr('width', setW + '')
        $imgTarget.attr('height', setH + '')
        const newImgRect = $imgTarget.getBoundingClientRect()
        setDragStyle(
          $drag,
          setW,
          setH,
          newImgRect.left - boxRect.left,
          newImgRect.top - boxRect.top
        )

        // 解绑事件
        offEvents()
      }
      $document.on('mouseup', mouseUpHandler)

      // 解绑事件
      $document.on('mouseleave', offEvents)
    })
  }

  // 显示拖拽框
  function showDrag($target) {
   // if (UA.isIE()) return false
    if ($target) {
      $imgTarget = $target
      showDargBox($textContainerElem, $drag, $imgTarget)
    }
  }

  // 隐藏拖拽框
  function hideDrag() {
    $textContainerElem.find('.w-e-img-drag-mask').hide()
  }

  // 事件绑定
  bindDragEvents($drag, $textContainerElem)

  // 后期改成 blur 触发
  $(document).on('click', hideDrag)
  editor.beforeDestroy(function () {
    $(document).off('click', hideDrag)
  })

  return {
    showDrag,
    hideDrag,
  }
}
/**
 * 点击事件委托
 * @param editor 编辑器实例
 */
export default function bindDragImgSize(editor) {
  const { showDrag, hideDrag } = createShowHideFn(editor)

  // 显示拖拽框
  editor.txt.eventHooks.imgClickEvents.push(showDrag)

  // 隐藏拖拽框
  editor.txt.eventHooks.textScrollEvents.push(hideDrag)
  editor.txt.eventHooks.keyupEvents.push(hideDrag)
  editor.txt.eventHooks.toolbarClickEvents.push(hideDrag)
  editor.txt.eventHooks.menuClickEvents.push(hideDrag)
  editor.txt.eventHooks.changeEvents.push(hideDrag)
}
